<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
    <title>View.background - Hilo Example</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="../build/standalone/hilo-standalone.min.js"></script>
    <script type="text/javascript" src="../build/flash/hilo-flash.min.js" data-auto="true"></script>
</head>
<body onload="init();">
    <div id="header">
        <h1>View.background</h1>
        <p>所有View都可以设置背景。CanvasRenderer还支持渐变和图片背景。</p>
    </div>
    <div id="game-container"></div>
    <script type="text/javascript" src="js/demo.js"></script>
    <script type="text/javascript">
        function init(){
			console.log(stageWidth + "-" + stageHeight)
            //init stage
            var stage = new Hilo.Stage({
                renderType:renderType,
                container: gameContainer,
                width: stageWidth,
                height: stageHeight
            });

            //start stage ticker
            var ticker = new Hilo.Ticker(20);
            ticker.addTick(stage);
            ticker.start();

            //create a container with background
            var container = new Hilo.Container({
                width: stage.width,
                height: stage.height,
                background: '#efe'
            }).addTo(stage);

            var view = new Hilo.View({
                width: stage.width - 40,
                height: 50,
                x: 20,
                y: 20
            }).addTo(container);

            if(!Hilo.isFlash && stage.renderer.renderType === 'canvas'){
                //background: gradient fill, `CanvasRenderer` only
                var gradient = stage.renderer.context.createLinearGradient(0, 0, 0, view.height);
                gradient.addColorStop(0, '#fc0');
                gradient.addColorStop(0.5, '#ff0');
                gradient.addColorStop(1.0, '#0f0');
                view.background = gradient;

                var fish = new Hilo.View({
                    width: 174,
                    height: 126,
                    x: 75,
                    y: 100
                }).addTo(stage);

                //background: image fill, `CanvasRenderer` only
                var img = new Image();
                img.src = 'images/fish.png';
                img.onload = function(){
                    img.onload = null;
                    var pattern = stage.renderer.context.createPattern(img, 'no-repeat');
                    fish.background = pattern;
                }
            }
            else{
                view.background = "#f96";
            }
        }
    </script>
</body>
</html>